import BpmnModeler from "@/module/main/other/BpmnTestView/BpmnModeler";
import {Component, ComponentProps, VueComponent, Mut} from "vue3-oop";
import {NForm, NFormItemGi, NGrid, NInput, NSwitch, NTabPane} from "naive-ui";

interface IProps {
  bpmnModeler: BpmnModeler,
  elementId: string,
  elementName: string,
  elementType: string
}
@Component()
export default class Index extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    bpmnModeler: {default: {} as any},
    elementId: {default: ''},
    elementName: {default: ''},
    elementType: {default: ''}
  }

  public static tabKey = "BASE"
  public static tabName = "常规"

  @Mut() private state = {
    id: '',
    name: '',

    isProcess: false,
    versionTag: '',
    isExecutable: ''

  }



  private loadPropsFromElement=()=>{
    const {bpmnModeler,elementType} = this.props;
    const {businessObject} = bpmnModeler.getSelectedElement();
    this.state.id = businessObject.id;
    this.state.name = businessObject.name?businessObject.name:'';

    this.state.isProcess = elementType==='Process'
    if(this.state.isProcess){
      this.state.versionTag = businessObject.versionTag;
      this.state.isExecutable = businessObject.isExecutable;
    }
  }

  private updatePropsToElement=()=>{
    const {bpmnModeler} = this.props;
    const element = bpmnModeler.getSelectedElement();
    let propsObj = {
      id: this.state.id,
      di: { id: `${this.state.id}_di` },
      name: this.state.name,
    } as any;
    if(this.state.isProcess){
      propsObj = {...propsObj,
        versionTag: this.state.versionTag,
        isExecutable: this.state.isExecutable
      }
    }
    bpmnModeler.getModeling().updateProperties(element,propsObj);
  }

  render(){
    this.loadPropsFromElement();
    return(
      <NForm labelPlacement="left" labelWidth={100}>
        <NGrid cols={2} xGap={20}>
          <NFormItemGi label="ID"><NInput value={this.state.id} onUpdateValue={(value)=>{this.state.id = value;this.updatePropsToElement();}} /></NFormItemGi>
          <NFormItemGi label="名称"><NInput value={this.state.name} onUpdateValue={(value)=>{this.state.name = value;this.updatePropsToElement();}} /></NFormItemGi>
          { this.state.isProcess && <NFormItemGi label="版本"><NInput value={this.state.versionTag} onUpdateValue={(value)=>{this.state.versionTag = value;this.updatePropsToElement();}} /></NFormItemGi>}
          { this.state.isProcess && <NFormItemGi label="可执行"><NSwitch value={this.state.isExecutable} onUpdateValue={(value)=>{this.state.isExecutable = value;this.updatePropsToElement();}} /></NFormItemGi>}
        </NGrid>
      </NForm>
    )
  }
}